function dragableSections() {
  var self=this;

  var iDragSize=25;
  var iScrollbarSize=15;
  var iColumnPadding=30;

  this.bMouseDownUD=false;
  this.bMouseDownLR=false;
  this.bMouseDownList=false;
  this.bMouseDownColumn=false;

  this.b2ndMainRight=false;
  
  this.bNoColumns=false;
  this.bNoTree=false;
  this.bNo2ndMain=false;
  
  var rAll, iAvailHeight, iAvailWidth, aColumns;
  var iStartX, iStartXTree, iStartXLists, iStartY, iStartYColumns, iStartYTree, iStartYLists, iStartMouse, iStartList1, iStartList2, fList1Rel, iStartXColumn, sColumnId;
  var iRestoreSizeColumns, iRestoreSizeTree, fList1Rel4Restore, iRememberColumnsX;

  this.initDragLR=function(iMouseX) {
    if (self.bNoTree) return;
    self.bMouseDownLR=true;
    iStartX=iMouseX;
    iStartXTree=document.getElementById('tree').offsetWidth;
    iStartXLists=document.getElementById('lists').offsetWidth;
    if (self.b2ndMainRight) {
      fList1Rel=document.getElementById('list1').offsetWidth/(iStartXLists-iDragSize);
    }
  }

  this.initDragUD=function(iMouseY) {
    if (self.bNoColumns) return;
    self.bMouseDownUD=true;
    iStartY=iMouseY;
    iStartYColumns=document.getElementById('columns').offsetHeight;
    iStartYTree=document.getElementById('tree').offsetHeight;
    iStartYLists=document.getElementById('lists').offsetHeight;
    if (!self.b2ndMainRight) {
      fList1Rel=document.getElementById('list1').offsetHeight/(iStartYLists-iDragSize);
    }
    aColumns=document.getElementById('columns').getElementsByTagName('ul');
  }
  
  this.initDragList=function(iMousePos) {
    if (self.bNo2ndMain) return;
    self.bMouseDownList=true;
    iStartMouse=iMousePos;
    if (self.b2ndMainRight) {
      iStartList1=document.getElementById('list1').offsetWidth;
      iStartList2=document.getElementById('list2').offsetWidth;
    } else {
      iStartList1=document.getElementById('list1').offsetHeight;
      iStartList2=document.getElementById('list2').offsetHeight;
    }
  }
  
  this.initDragColumn=function(iMouseX, sId) {
    self.bMouseDownColumn=true;
    iStartX=iMouseX;
    sColumnId=sId.substring(sId.indexOf('column'), sId.length);
    iStartXColumn=document.getElementById(sColumnId).offsetWidth-iColumnPadding;
  }

  this.handleMove=function(iMouse) { // checken of toe te kennen waarden niet kleiner zijn dan 0
    if (self.bMouseDownUD) {
      var iColumnsY=iStartYColumns+(iStartY-iMouse);
      var iTreeY=iAvailHeight-iColumnsY-iDragSize;
      if (iColumnsY<=iScrollbarSize || iTreeY<=iDragSize)
        return;
      document.getElementById('columns').style.height=iColumnsY+'px';
      var iColumnIndex=aColumns.length;
      while (iColumnIndex--) {
        aColumns[iColumnIndex].style.height=iColumnsY-iScrollbarSize+'px';
      }
      document.getElementById('tree').style.height=iTreeY+'px';
      document.getElementById('draglr').style.height=iTreeY+'px';
      document.getElementById('lists').style.height=iTreeY+'px';
      if (self.b2ndMainRight) {
        document.getElementById('list1').style.height=iTreeY+'px';
        document.getElementById('list2').style.height=iTreeY+'px';
        document.getElementById('draglist').style.height=iTreeY+'px';
      } else {
        var iList1=Math.round((iTreeY-iDragSize)*fList1Rel);
        document.getElementById('list1').style.height=iList1+'px';
        document.getElementById('list2').style.height=iTreeY-iList1-iDragSize+'px';
      }
    }
    if (self.bMouseDownLR) {
      var iTreeX=iStartXTree+(iMouse-iStartX);
      var iListsX=iAvailWidth-iTreeX-iDragSize;
      if (iTreeX<=0 || iListsX<=iDragSize)
        return;
      document.getElementById('tree').style.width=iTreeX+'px';
      document.getElementById('lists').style.width=iListsX+'px';
      if (!self.b2ndMainRight) {
        document.getElementById('list1').style.width=iListsX+'px';
        document.getElementById('list2').style.width=iListsX+'px';
        document.getElementById('draglist').style.width=iListsX+'px';
      } else {
        var iList1=Math.round((iListsX-iDragSize)*fList1Rel);
        document.getElementById('list1').style.width=iList1+'px';
        document.getElementById('list2').style.width=iListsX-iList1-iDragSize+'px';
      }
    }
    if (self.bMouseDownList) {
      if (self.b2ndMainRight) {
        var iList1=iStartList1+(iMouse-iStartMouse);
        var iAvail=document.getElementById('lists').offsetWidth;
        if (iList1<=0 || iAvail-iList1<=iDragSize)
          return;
        document.getElementById('list1').style.width=iList1+'px';
        document.getElementById('list2').style.width=iAvail-iList1-iDragSize+'px';
      } else {
        var iList1=iStartList1+(iMouse-iStartMouse);
        var iAvail=document.getElementById('lists').offsetHeight;
        if (iList1<=0 || iAvail-iList1<=iDragSize)
          return;
        document.getElementById('list1').style.height=iList1+'px';
        document.getElementById('list2').style.height=iAvail-iList1-iDragSize+'px';
      }
    }
    if (self.bMouseDownColumn) {
      var iColumnX=iStartXColumn+(iMouse-iStartX);
      if (iColumnX<=0)
        return;
      if (iColumnX<iStartXColumn || (iRememberColumnsX!=undefined && document.getElementById('getcolumnsize').offsetWidth<=iRememberColumnsX)) {
        document.getElementById('setcolumnsize').style.width=document.getElementById('setcolumnsize').offsetWidth+'px';
      } else if (document.getElementById('getcolumnsize').offsetWidth>=document.getElementById('setcolumnsize').offsetWidth) {
        iRememberColumnsX=document.getElementById('setcolumnsize').offsetWidth;
        document.getElementById('setcolumnsize').style.width='auto';
      }
      document.getElementById(sColumnId).style.width=iColumnX+'px';
    }
  }
  
  this.switch2ndMain=function() {
    if (self.b2ndMainRight) {
      self.b2ndMainRight=false;
      var iAvailListHeight=document.getElementById('lists').offsetHeight;
      var iAvailListWidth =document.getElementById('lists').offsetWidth;
      fList1Rel=document.getElementById('list1').offsetWidth/(iAvailListWidth-iDragSize);
      document.getElementById('list1').style.width=iAvailListWidth+'px';
      document.getElementById('list2').style.width=iAvailListWidth+'px';
      document.getElementById('draglist').style.width=iAvailListWidth+'px';
      var iList1=Math.round((iAvailListHeight-iDragSize)*fList1Rel);
      document.getElementById('list1').style.height=iList1+'px';
      document.getElementById('list2').style.height=iAvailListHeight-iList1-iDragSize+'px';
      document.getElementById('draglist').style.height=iDragSize+'px';
      document.getElementById('draglist').style.cursor='s-resize';
      document.getElementById('draglist').style.background='url(images/hr.png) repeat-x center center';
    } else {
      self.b2ndMainRight=true;
      var iAvailListHeight=document.getElementById('lists').offsetHeight;
      var iAvailListWidth =document.getElementById('lists').offsetWidth;
      fList1Rel=document.getElementById('list1').offsetHeight/(iAvailListHeight-iDragSize);
      document.getElementById('list1').style.height=iAvailListHeight+'px';
      document.getElementById('list2').style.height=iAvailListHeight+'px';
      document.getElementById('draglist').style.height=iAvailListHeight+'px';
      var iList1=Math.round((iAvailListWidth-iDragSize)*fList1Rel);
      document.getElementById('list1').style.width=iList1+'px';
      document.getElementById('list2').style.width=iAvailListWidth-iList1-iDragSize+'px';
      document.getElementById('draglist').style.width=iDragSize+'px';
      document.getElementById('draglist').style.cursor='w-resize';
      document.getElementById('draglist').style.background='url(images/vr.png) repeat-y center center';
    }
  }
  
  this.showHide=function(sSection) {
    switch (true) {
      case (sSection=='columns' && !self.bNoColumns):
        self.bNoColumns=true;
        iRestoreSizeColumns=document.getElementById('columns').offsetHeight;
        if (!self.b2ndMainRight) {
          fList1Rel=document.getElementById('list1').offsetHeight/(document.getElementById('lists').offsetHeight-iDragSize);
        }
        document.getElementById('tree').style.height=iAvailHeight-iDragSize+'px';
        document.getElementById('draglr').style.height=iAvailHeight-iDragSize+'px';
        document.getElementById('lists').style.height=iAvailHeight-iDragSize+'px';
        if (!self.b2ndMainRight) {
          var iList1=Math.round((iAvailHeight-iDragSize-iDragSize)*fList1Rel);
          document.getElementById('list1').style.height=iList1+'px';
          document.getElementById('list2').style.height=iAvailHeight-iDragSize-iList1-iDragSize+'px';
        } else {
          document.getElementById('list1').style.height=iAvailHeight-iDragSize+'px';
          document.getElementById('list2').style.height=iAvailHeight-iDragSize+'px';
          document.getElementById('draglist').style.height=iAvailHeight-iDragSize+'px';
        }
        document.getElementById('columns').style.display='none';
//        document.getElementById('columns').style.height='0px';
      break;
      case (sSection=='columns' && self.bNoColumns):
        self.bNoColumns=false;
        if (!self.b2ndMainRight) {
          fList1Rel=document.getElementById('list1').offsetHeight/(document.getElementById('lists').offsetHeight-iDragSize);
        }
        document.getElementById('tree').style.height=iAvailHeight-iRestoreSizeColumns-iDragSize+'px';
        document.getElementById('draglr').style.height=iAvailHeight-iRestoreSizeColumns-iDragSize+'px';
        document.getElementById('lists').style.height=iAvailHeight-iRestoreSizeColumns-iDragSize+'px';
        if (!self.b2ndMainRight) {
          var iList1=Math.round((iAvailHeight-iRestoreSizeColumns-iDragSize-iDragSize)*fList1Rel);
          document.getElementById('list1').style.height=iList1+'px';
          document.getElementById('list2').style.height=iAvailHeight-iRestoreSizeColumns-iDragSize-iList1-iDragSize+'px';
        } else {
          document.getElementById('list1').style.height=iAvailHeight-iRestoreSizeColumns-iDragSize+'px';
          document.getElementById('list2').style.height=iAvailHeight-iRestoreSizeColumns-iDragSize+'px';
          document.getElementById('draglist').style.height=iAvailHeight-iRestoreSizeColumns-iDragSize+'px';
        }
        document.getElementById('columns').style.display='block';
//        document.getElementById('columns').style.height=iRestoreSizeColumns+'px';
      break;
      case (sSection=='tree' && !self.bNoTree):
        self.bNoTree=true;
        iRestoreSizeTree=document.getElementById('tree').offsetWidth;
        if (self.b2ndMainRight) {
          fList1Rel=document.getElementById('list1').offsetWidth/(document.getElementById('lists').offsetWidth-iDragSize);
        }
        document.getElementById('lists').style.width=iAvailWidth-iDragSize+'px';
        if (self.b2ndMainRight) {
          var iList1=Math.round((iAvailWidth-iDragSize-iDragSize)*fList1Rel);
          document.getElementById('list1').style.width=iList1+'px';
          document.getElementById('list2').style.width=iAvailWidth-iDragSize-iList1-iDragSize+'px';
        } else {
          document.getElementById('list1').style.width=iAvailWidth-iDragSize+'px';
          document.getElementById('list2').style.width=iAvailWidth-iDragSize+'px';
          document.getElementById('draglist').style.width=iAvailWidth-iDragSize+'px';
        }
        document.getElementById('tree').style.display='none';
//        document.getElementById('tree').style.width='0px';
      break;
      case (sSection=='tree' && self.bNoTree):
        self.bNoTree=false;
        if (self.b2ndMainRight) {
          fList1Rel=document.getElementById('list1').offsetWidth/(document.getElementById('lists').offsetWidth-iDragSize);
        }
        document.getElementById('lists').style.width=iAvailWidth-iRestoreSizeTree-iDragSize+'px';
        if (self.b2ndMainRight) {
          var iList1=Math.round((iAvailWidth-iRestoreSizeTree-iDragSize-iDragSize)*fList1Rel);
          document.getElementById('list1').style.width=iList1+'px';
          document.getElementById('list2').style.width=iAvailWidth-iRestoreSizeTree-iDragSize-iList1-iDragSize+'px';
        } else {
          document.getElementById('list1').style.width=iAvailWidth-iRestoreSizeTree-iDragSize+'px';
          document.getElementById('list2').style.width=iAvailWidth-iRestoreSizeTree-iDragSize+'px';
          document.getElementById('draglist').style.width=iAvailWidth-iRestoreSizeTree-iDragSize+'px';
        }
        document.getElementById('tree').style.display='block';
//        document.getElementById('tree').style.width=iRestoreSizeTree+'px';
      break;
      case (sSection=='2ndMain' && !self.bNo2ndMain):
        self.bNo2ndMain=true;
        if (self.b2ndMainRight) {
          var iAvailListX=document.getElementById('lists').offsetWidth;
          fList1Rel4Restore=document.getElementById('list1').offsetWidth/(iAvailListX-iDragSize);
          document.getElementById('list1').style.width=iAvailListX-iDragSize+'px';
          document.getElementById('list2').style.width='0px';
        } else {
          var iAvailListY=document.getElementById('lists').offsetHeight;
          fList1Rel4Restore=document.getElementById('list1').offsetHeight/(iAvailListY-iDragSize);
          document.getElementById('list1').style.height=iAvailListY-iDragSize+'px';
          document.getElementById('list2').style.height='0px';
        }
      break;
      case (sSection=='2ndMain' && self.bNo2ndMain):
        self.bNo2ndMain=false;
        if (self.b2ndMainRight) {
          var iAvailListX=document.getElementById('lists').offsetWidth;
          var iList1=Math.round((iAvailListX-iDragSize)*fList1Rel4Restore);
          document.getElementById('list1').style.width=iList1+'px';
          document.getElementById('list2').style.width=iAvailListX-iList1-iDragSize+'px';
        } else {
          var iAvailListY=document.getElementById('lists').offsetHeight;
          var iList1=Math.round((iAvailListY-iDragSize)*fList1Rel4Restore);
          document.getElementById('list1').style.height=iList1+'px';
          document.getElementById('list2').style.height=iAvailListY-iList1-iDragSize+'px';
        }
      break;
    }
  }
  
  this.noBubble=function(e) {
    if (!e) var e = window.event;
  	e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
  }
  
  function addEventListeners() {
    document.getElementById('draglr').onmousedown=function(e) {
      oDragSec.initDragLR(e.clientX);
    }
    document.getElementById('dragud').onmousedown=function(e) {
      oDragSec.initDragUD(e.clientY);
    }
    document.getElementById('draglist').onmousedown=function(e) {
      oDragSec.initDragList((oDragSec.b2ndMainRight)?e.clientX:e.clientY);
    }
    var aDragColumns=getElementsByClassName(document.getElementById('columns'), 'dragcolumn');
    var iColumnIndex=aDragColumns.length;
    while (iColumnIndex--) {
      aDragColumns[iColumnIndex].onmousedown=function(e) {
        oDragSec.initDragColumn(e.clientX, this.id);
      }
    }
    document.getElementById('cHideColumns').onmousedown=function(e) { oDragSec.noBubble(e); }
    document.getElementById('cHideTree').onmousedown=function(e) { oDragSec.noBubble(e); }
    document.getElementById('cHide2ndMain').onmousedown=function(e) { oDragSec.noBubble(e); }
    document.getElementById('cSwitch2ndMain').onmousedown=function(e) { oDragSec.noBubble(e); }
    document.getElementById('cHideColumns').onclick=function(e) {
      oDragSec.showHide('columns');
    }
    document.getElementById('cHideTree').onclick=function(e) {
      oDragSec.showHide('tree');
    }
    document.getElementById('cHide2ndMain').onclick=function(e) {
      oDragSec.showHide('2ndMain');
    }
    document.getElementById('cSwitch2ndMain').onclick=function(e) {
      oDragSec.switch2ndMain();
    }
    document.getElementById('columns').onscroll=function() {
      document.getElementById('setcolumnsize').style.width='auto';
    }
  }
  
//  function addEventNewColumn() {
    
  
  function init1stSizes() {
    rAll=document.documentElement;
    iAvailHeight=rAll.offsetHeight;
    iAvailWidth=rAll.offsetWidth;
    
    document.getElementById('dragud').style.height=iDragSize+'px';
    document.getElementById('draglr').style.width=iDragSize+'px';
    
    var iColumnsY=Math.floor((iAvailHeight-iDragSize)*.3)+iScrollbarSize;
    document.getElementById('columns').style.height=iColumnsY+'px';
    aColumns=document.getElementById('columns').getElementsByTagName('ul');
    var iColumnIndex=aColumns.length;
    while (iColumnIndex--) {
      aColumns[iColumnIndex].style.height=iColumnsY-iScrollbarSize+'px';
    }
    
    var iAvailListHeight=iAvailHeight-iColumnsY-iDragSize; // Math.floor((iAvailHeight-iDragSize-iScrollbarSize)*.7);
    var iTreeX=Math.floor((iAvailWidth-iDragSize)*.2)
    var iAvailListWidth =iAvailWidth-iTreeX-iDragSize; // Math.floor((iAvailWidth-iDragSize)*.8);

    document.getElementById('tree').style.height   =iAvailListHeight+'px';
    document.getElementById('tree').style.width    =iTreeX+'px';
    document.getElementById('draglr').style.height =iAvailListHeight+'px';
    document.getElementById('lists').style.height  =iAvailListHeight+'px';
    document.getElementById('lists').style.width   =iAvailListWidth+'px';
    document.getElementById('draglist').style.width=iAvailListWidth+'px';

    if (self.b2ndMainRight) {
      document.getElementById('draglist').style.width =iDragSize+'px';
      document.getElementById('list1').style.height   =iAvailListHeight+'px';
      document.getElementById('list1').style.width    =Math.ceil((iAvailListWidth-iDragSize)*.5)+'px';
      document.getElementById('list2').style.height   =iAvailListHeight+'px';
      document.getElementById('list2').style.width    =Math.floor((iAvailListWidth-iDragSize)*.5)+'px';
    } else {
      document.getElementById('draglist').style.height=iDragSize+'px';
      document.getElementById('list1').style.height   =Math.ceil((iAvailListHeight-iDragSize)*.5)+'px';
      document.getElementById('list1').style.width    =iAvailListWidth+'px';
      document.getElementById('list2').style.height   =Math.floor((iAvailListHeight-iDragSize)*.5)+'px';
      document.getElementById('list2').style.width    =iAvailListWidth+'px';
    }
  }
  
  this.init=function() {
    init1stSizes();
    addEventListeners();
  }
  this.mouseLetGo=function() {
    this.bMouseDownUD=false;
    this.bMouseDownLR=false;
    this.bMouseDownList=false;
    this.bMouseDownColumn=false;
//    document.getElementById('columnsizer').style.width='auto';
  }
  this.mouseMove=function(e) {
    if (this.bMouseDownUD || (this.bMouseDownList && !this.b2ndMainRight)) {
      this.handleMove(e.clientY);
    } else if (this.bMouseDownLR || (this.bMouseDownList && this.b2ndMainRight) || this.bMouseDownColumn) {
      this.handleMove(e.clientX);
    }
  }
}




